<template>
  <el-form :model="formData" size="small" :rules="rules" ref="formRef" label-width="84px">
    <div class="y-px-3 y-py-3 y-rounded y-mb-3 y-border-solid y-border-[1px] y-border-[#efefef]">
      <h3 class="y-mb-3 y-flex y-items-center">
        <i class="y-block y-w-1.5 y-h-4 y-bg-blue-400 y-mx-2"></i>
        <span class="y-text-base">基本信息</span>
      </h3>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="所属父级" prop="pid">
              <yyCascader ref="yyCascaderRef" :options="pidOptions" v-model="formData.pid" @change="onChangePid" @init="onCascaderInit" propsLabel="name" propsValue="id" propsChildren="childList" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="名称" prop="name">
            <el-input v-model="formData.name" :maxlength="32"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="菜单编码" prop="code">
            <el-input v-model="formData.code" :maxlength="32">
              <template slot="prepend" v-if="parentMenuData.code">{{ parentMenuData.code }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="权限码" prop="permission">
            <el-input v-model="formData.permission" :maxlength="128">
              <template slot="prepend" v-if="parentMenuData.permission">{{ parentMenuData.permission }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="路由指向" prop="routerViewName">
            <el-input v-model="formData.routerViewName" :maxlength="128"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="formData.sort" :maxlength="128"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="y-px-3 y-py-3 y-rounded y-mb-3 y-border-solid y-border-[1px] y-border-[#efefef]">
      <h3 class="y-mb-3 y-flex y-items-center">
        <i class="y-block y-w-1.5 y-h-4 y-bg-blue-400 y-mx-2"></i>
        <span class="y-text-base">其它</span>
      </h3>
      <el-row :gutter="10">
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="组件路径" prop="component">
            <el-input v-model="formData.component" :maxlength="128">
              <template slot="prepend" v-if="parentMenuData.component">{{ parentMenuData.component }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="访问路径" prop="path">
            <el-input v-model="formData.path" :maxlength="128">
              <template slot="prepend" v-if="parentMenuData.path">{{ parentMenuData.path }}</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="图标" prop="icon">
            <yySelectIcon v-model="formData.icon" />
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="显示" prop="isShow">
            <el-radio-group v-model="formData.isShow">
              <el-radio v-for="item in isShowOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="开启缓存" prop="keepAlive">
            <el-radio-group v-model="formData.keepAlive">
              <el-radio v-for="item in keepAliveOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="8" :xl="8">
          <el-form-item label="状态" prop="state">
            <el-radio-group v-model="formData.state">
              <el-radio v-for="item in stateOptions" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
    <div class="y-text-center">
      <el-form-item>
        <el-button type="primary" @click="handleConfirm">保存</el-button>
        <el-button @click="handleReset">重置</el-button>
        <el-button @click="handleClose">关闭</el-button>
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
import { isShowOptions, stateOptions, keepAliveOptions } from "@/constant/defaultOptions.js";
import { createLoading, createMessage, getReplaceStr, mergeStr } from "@/utils/index.js";
import { goBack } from "@/utils/browser.js";
import yyCascader from "@/components/yyForm/component/yyCascader.vue";
import yySelectIcon from '@/components/yyForm/component/yySelectIcon.vue';
export default {
  name: "system_menu_edit",
  components: { yyCascader, yySelectIcon},
  data() {
    return {
      isShowOptions,
      stateOptions,
      keepAliveOptions,
      pidOptions: [],
      parentMenuData: {
        component: "",
        permission: "",
        path: "",
        code: "",
      },
      formData: {
        pid: "",
        name: "",
        code: "",
        component: "",
        state: "",
        path: "",
        permission: "",
        routerViewName: "layer",
        icon: "",
        sort: "",
        isShow: "",
        keepAlive: "",
      },
      rules: {
        name: [{ required: true, message: "必填", trigger: "blur" }],
        permission: [{ required: true, message: "必填", trigger: "blur" }],
        code: [{ required: true, message: "必填", trigger: "blur" }],
        routerViewName: [{ required: true, message: "必填", trigger: "blur" }],
        sort: [{ required: true, message: "必填", trigger: "blur" }],
        state: [{ required: true, message: "必填", trigger: "change" }],
        isShow: [{ required: true, message: "必填", trigger: "change" }],
        keepAlive: [{ required: true, message: "必填", trigger: "change" }],
      },
    };
  },
  methods: {
    mergeStr,
    onCascaderInit (val) {
      this.onChangePid(val);
      this.formData.permission = getReplaceStr(this.formData.permission, val?.permission);
      this.formData.code = getReplaceStr(this.formData.code, val?.code);
      this.formData.path = getReplaceStr(this.formData.path, val?.path);
      this.formData.component = getReplaceStr(this.formData.component, val?.component);
    },
    onChangePid (val) {
      this.parentMenuData.permission = val?.permission;
      this.parentMenuData.code = val?.code;
      this.parentMenuData.path = val?.path;
      this.parentMenuData.component = val?.component;
    },
    handleConfirm() {
      this.$refs.formRef.validate(async (isOk) => {
        if (!isOk) {
          return createMessage("请完成必填项的填写与选择");
        }
        const params = {
          ...this.formData,
        };
        const { permission, code, path, component} = this.parentMenuData;
        params.permission = mergeStr(params.permission, permission, ':');
        params.code = mergeStr(params.code, code, '_');
        params.path = mergeStr(params.path, path, '/');
        params.component = mergeStr(params.component, component, '/');
        const loading = createLoading("保存中，请稍等");
        try {
          await this.$globalApi.menu.sysMenuUpdateApi(params);
          createMessage("保存成功", { type: "success" });
          this.$emit("refresh");
          goBack("/system/menu");
        } catch (err) {
          console.log("新增菜单报错了", err);
        } finally {
          loading.close();
        }
      });
    },
    async handleReset() {
      this.$refs.formRef.resetFields();
      await this.init();
      this.$refs.yyCascaderRef.updateState();
    },
    async getPidOptions () {
      try {
        const res = await this.$globalApi.menu.sysMenuListApi({});
        this.pidOptions = res;
      } catch (err) {
        console.log("报错了", err);
      }
    },
    handleClose() {
      goBack("/system/menu");
    },
    async init() {
      if (!this.formData.id) {
        this.handleClose();
        return;
      }
      const loading = createLoading("正在查询详情信息，请稍等");
      try {
        const res = await this.$globalApi.menu.sysMenuDetailApi({
          id: this.formData.id,
        });
        Object.assign(this.formData, res, {password: ""});
      } catch (err) {
        console.log("获取菜单详情失败了", err);
      } finally {
        loading.close();
      }
    },
  },
  mounted () {
    this.formData.id = this.$route.query.id;
    this.init();
    this.getPidOptions();
  }
};
</script>

<style></style>